<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>栅格</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.3.5/css/bootstrap.css">
</head>
<body>
<div>
    <div class="col-xs-2" style="background-color: yellow">两列栅格</div>
    <div class="col-xs-10" style="background-color: red">十列栅格</div>
    <br>
    <div class="col-xs-6" style="background-color: yellow">六列栅格</div>
    <div class="col-xs-6" style="background-color: red">六列栅格</div>
    <br>
    <div class="col-md-3" style="background-color: yellow">三列栅格</div>
    <div class="col-md-9" style="background-color: red">九列栅格</div>
    <br>
    <div class="col-lg-4" style="background-color: yellow">四列栅格</div>
    <div class="col-lg-8" style="background-color: red">八列栅格</div>
    <br>
    <div class="col-sm-5" style="background-color: yellow">五列栅格</div>
    <div class="col-sm-7" style="background-color: red">七列栅格</div>
    <br>
    <div class="col-sm-7 col-md-offset-3" style="background-color: blue">向右偏移三格的七列栅格</div>
</div>

</body>
</html>